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A bookmarklet is a small Javascript program stored into a url. A 
user can bookmark the specific url, and execute the Javascript code 
on any page. The good news is that it’s not so hard to create one. 
A very simple example is the bookmarklet below: 


<a href="javascript:alert ("Phrappe.com rocks!")>A 


vary basic bookmarklet!</a>Check out this Pen! 


As you can see, you instruct the browser to run a javascript url. 
You can drag & drop the link to your bookmarks, and execute the 
bookmarklet on any page! That’s the power of bookmarklets. Go 


on try it @ 


Unfortunately, we have some browser limitations on url size 
(usually 2000 characters), that makes it impossible to write serious 
js code straight into a url. To tackle this limitation we can use our 
bookmarklet as a loader to an external js file using the below code 


javascript: (function() { 
var s=document.createElement ("Script") ; 
s.src="http://phrappe.com/script.js"; 
document .body.appendChild(s); 

}) (); Check out this Pen! 


We start with the standard js url notation, and then we create a 
self executing anonymous function. Into that function, we just 
create a new script element, pass a source attribute to it and 
append it to our current document. Then we can finally start 
writing some serious javascript code to our external script, without 
any of the usual bookmarklet limitations! The script itself can again 
be a self executing anonymous function (because we don’t want to 
mess with document's js code and variables). 


(function() { 
//code 
}) (); Check out this Pen! 


Keep in mind that bookmarklets have access to all the content and 
code of the document we ran them. So if you don’t trust a 
boorkmarklet code, don’t use it on sensitive pages, because the 
bookmarklet can access sensitive and personal data such as 
coockies, variables or elements! Be extra careful when you use 
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them and if you don’t trust the source/author don’t use them at all! 
Below you can see a very simple bookmarklet I created to 
transform sites to a more console-like layout (black background, 
monospace green fonts, etc.). 

Console it! (drag’n drop it to your bookmarks and try it at 


google.com @ ). You can see the code below or simply download 
it. 


(function() { 


var body = document .body, 


links = document.getElementsByTagName('a'); 


body.setAttribute("style", "background- 
color:#000; color:#fff; font-family: \"Courier 


New\", Courier, monospace;"); 


for ( i in links ){ 
links[i].setAttribute("style", "color:#347cl17; 
font-family: \"Courier New\", Courier, 


monospace;"); 


)();Check out this Pen! 


Finally, a very useful bookmarklet I use all the time is jQuerify. It 
loads jQuery on any page. Then I can just do the cool stuff 
through console @ 


Like this: Loading... 


PREVIOUS POST 
A really simple “equal heights” method for jQuery! 


NEXT POST 
A really simple HTML5 template 


ONE THOUGHT ON “HOW TO CREATE A BOOKMARKLET” 


Ferb 

MARCH 5, 2012 AT 11:35 PM 

I've been wondering for quite sometime now as to how to 
create a bookmarklet without having to complicate things 
further. And this sample provided an easy-to-follow solution 
to that. Thanks for the post! 


Ferb 
Latest Post: réglage parabole 
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Notify me of follow-up comments via email. 


Notify me of new posts via email. 
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